<template>
  <div>
    <div class="base-info-img">
        <table>
            <tr>
                <td>房屋详址</td>
                <!--地址过长裁剪长度-->
                <!--v-bind:title="houseInfo.houseAddr"   | truncateAddress-->
                <td style="border-bottom: 1px solid #A0A1A1;" >{{ houseInfo.houseAddr }} <img src="/img/location.jpg"></td>
            </tr>
            <tr>
                <td>房屋编号</td>
                <!--裁剪编号长度-->
                <!--v-bind:title="houseInfo.houseCode"    | truncateHouseCode-->
                <td>{{ houseInfo.houseCode }}</td>
            </tr>
            <tr>
                <td>出租用途</td>
                <td>{{ rentalPurposes }}</td>
            </tr>
            <tr>
                <td>隐患类型</td>
                <td>{{ dangerType }}</td>
            </tr>
            <tr>
                <td>租住人数</td>
                <td>{{ houseInfo.numberOfTenant }}</td>
            </tr>
            <tr>
                <td>特殊人员</td>
                <td>{{ focusNum }} 个</td>
            </tr>
            <tr>
                <td>房屋面积</td>
                <td>{{ houseInfo.houseArea }} ㎡</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><u>房主信息</u></td>
                <td></td>
            </tr>
            <tr>
                <td>房主姓名</td>
                <td>{{ houseInfo.houseOwnerName }}</td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>{{ houseInfo.houseOwnerMobile }}</td>
            </tr>
            <tr>
                <td>居住地址</td>
                <!--裁剪地址长度-->
                <!--v-bind:title="houseInfo.houseOwnerLiveAddr"   | truncateAddress-->
                <td>{{ houseInfo.houseOwnerLiveAddr}}</td>
            </tr>
        </table>
        <div id="houseImg">
           <img width="20" height="20" src="/img/rent.png" style="margin-right: 62px;" v-if="houseInfo.isRent == '1'">
           <img width="20" height="20" src="/img/danger.png" v-if="houseInfo.isDanger == '1'">
        </div>
    </div>
    <div class="window-content-house" id="detailContent">
        <div class="detail-nav-button">
            <div :class="active === 1 ? 'active':''" @click="detailBtn(1)">同住人信息</div>
            <div :class="active === 2 ? 'active':''" @click="detailBtn(2)" v-if="houseInfo.isRent == '1'">承租人信息</div>
        </div>
        <div :class="active === 1 ? 'nav active':'nav'" id="detailNav2">
            <table class="same-table same-live">
                <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>民族</td>
                    <td>职业</td>
                    <td>籍贯</td>
                    <td>联系方式</td>
                    <td>证件号码</td>
                    <!--<td>现住地址</td>-->
                </tr>
                </thead>
                <tbody>
                <tr v-for="people in cohabit">
                    <td>{{ people.name }}</td>
                    <td>{{ people.sex }}</td>
                    <td>{{ people.nation }}</td>
                    <td>{{ people.frofession }}</td>
                    <td>{{ people.nativePlace }}</td>
                    <td>{{ people.mobile }}</td>
                    <td>{{ people.idCardNo }}</td>
                    <!--<td>{{ people.houseHoldAddr }}</td>-->
                </tr>
                </tbody>
            </table>
        </div>
        <div :class="active === 2 ? 'nav active':'nav'" id="detailNav1">
            <table>
                <tr style="background-color: rgb(231,249,255);">
                    <td>姓名</td>
                    <td>证件号码</td>
                    <td>联系方式</td>
                </tr>
                <tr>
                    <td>{{ houseInfo.renterName }}</td>
                    <td>{{ houseInfo.renterCardNumber }}</td>
                    <td>{{ houseInfo.renterMobile }}</td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>

<script>
import $ from "@/assets/jquery-vendor.js";
import "@/assets/css/gis/houseDetail.css";

import {houseDetail} from "@/api/xapply/doubleReal/peopleGis"

export default {
  name: 'houseDetail',
  props:['houseId'],
  data() {
    return {
      houseId:this.houseId,
      houseInfo: [],
      focusNum: 0,
      rentalPurposes: "",
      dangerType: "",
      cohabit: [],
      active:1,
    };
  },

  created(){
    if(this.houseId)
      this.init();
  },

  methods: {
    //tabs切换
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //加载数据
    init(){
      console.log("houseId",this.houseId)
      houseDetail(this.houseId).then(res=>{
        console.log("house_res:",res)
        this.houseInfo = res.data.houseInfo
        this.focusNum = res.data.focusNum
        this.cohabit = res.data.cohabit
      }).catch(error=>{
        console.log(error)
      })
    },

    //切换
    detailBtn(active){
      this.active = active
    }
  },
  beforeDestroy() {
    // if (this.view) {
    //   this.view.container = null
    // }

    this.houseId = ''
  },
}
</script>

<style lang="scss" scoped>

</style>
